<template>
  <div class="wrap-left-form">
    <el-form
      class="custom-form"
      ref="ruleFormRef"
      :model="formData"
      label-width="100px"
      runningStatus-icon
      :inline="true"
    >
      <div class="form-group-title">基本信息</div>
      <div class="form-item-info">
        <el-form-item class="form-itme-width_30" label="项目名称">
          <dc-view v-model="formData.projectId" objectName="project" />
        </el-form-item>
        <el-form-item class="form-itme-width_30" label="单据类型">
          <dc-dict type="text" :options="DC_BILL_TYPE" :value="scoped.row.fBillTypeDictId" />
        </el-form-item>
        <el-form-item class="form-itme-width_30" label="销售组织">
          {{ formData.fSaleOrgDictName }}
        </el-form-item>

        <el-form-item class="form-itme-width_30" label="销售员">
          {{ formData.fSalerName }}
        </el-form-item>

        <el-form-item class="form-itme-width_30" label="销售部门">
          {{ formData.fSaleDeptName }}
        </el-form-item>

        <el-form-item class="form-itme-width_30" label="日期">
          {{ formData.fDate }}
        </el-form-item>

        <el-form-item class="form-itme-width_30" label="客户">
          {{ formData.fCustName }}
        </el-form-item>

        <el-form-item class="form-itme-width_30" label="终端客户">
          {{ formData.fOraBaseName }}
        </el-form-item>

        <el-form-item class="form-itme-width_30" label="TPM">
          {{ formData.fTpmName }}
        </el-form-item>

        <el-form-item class="form-itme-width_30" label="运营跟单">
          {{ formData.fOraText3Name }}
        </el-form-item>
      </div>
    </el-form>
  </div>
  <div class="form-group-title form-group-header-title">销售订单明细</div>
  <el-table :data="formData.dcErpOrderItemList" v-loading="loading">
    <el-table-column label="序号" width="60" type="index" align="center">
      <template #default="scoped">
        <span>{{ (queryParams.current - 1) * queryParams.size + scoped.$index + 1 }}</span>
      </template>
    </el-table-column>

    <el-table-column label="物料编码" align="center" width="200">
      <template #default="scoped">
        <span>{{ scoped.row.fMaterialId }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fMaterialName" label="物料名称" align="center" width="200" />
    <el-table-column prop="contactsDeptName" label="存货类别" align="center" />
    <el-table-column
      prop="fMaterialModel"
      label="规格型号"
      align="center"
      width="180"
      show-overflow-tooltip
    />
    <el-table-column prop="fIsPrecisionPart" label="精密件" align="center" />
    <el-table-column prop="ff100001" label="喷砂亮银" align="center" />
    <el-table-column prop="fVersionNo" label="版本号" align="center" />
    <el-table-column prop="fUnitId" label="单位" align="center" width="100">
      <template #default="scoped">
        <span>{{ scoped.row.fUnitName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fQty" label="销售数量 " align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fQty }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fIsFree" label="是否赠品 " align="center">
      <template #default="scoped">
        <span v-if="scoped.row.fIsFree === false">不是</span>
        <span v-else>是</span>
      </template>
    </el-table-column>
    <el-table-column prop="fDeliveryDate" label="要货日期 " align="center" width="180">
      <template #default="scoped">
        <span> {{ scoped.row.fDeliveryDate }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fStockOrgId" label="库存组织 " align="center" width="180">
      <template #default="scoped">
        <span>
          {{ scoped.row.fStockOrgDictName }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="fPeSettleOrgId" label="结算组织 " align="center" width="180">
      <template #default="scoped">
        <span>
          {{ scoped.row.fPeSettleOrgDictName }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="fBomId" label="BOM版本 " align="center" />
    <el-table-column prop="fOwnerTypeId" label="货主类型 " align="center" />
    <el-table-column prop="fOwnerId" label="货主" align="center" />
    <el-table-column prop="fOraPrice" label="核价" align="center" />
    <el-table-column prop="fEntryNote" label="备注" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fEntryNote }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fMtoNo" label="计划跟踪号" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fMtoNo }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fBdkText" label="实际品名" align="center" />
    <el-table-column prop="fBdkText1" label="客户物料代码" align="center" />
    <el-table-column prop="fBdkText2" label="客户物料名称" align="center" />
    <el-table-column prop="fBdkText3" label="客户PO" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fBdkText3 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fBdkText4" label="客户ID" align="center" />
    <el-table-column prop="fBdkText5" label="成品和模组料号" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fBdkText5 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fBdkBaseProperty" label="旧物料编码" align="center" />
    <el-table-column prop="fBdkText8" label="内部PM" align="center" width="180">
      <template #default="scoped">
        <dc-dict v-model="scoped.row.fBdkText8" objectName="user" showKey="realName" />
      </template>
    </el-table-column>
    <el-table-column prop="fBdkText9" label="机构工程" align="center" width="180">
      <template #default="scoped">
        <dc-dict v-model="scoped.row.fBdkText9" objectName="user" showKey="realName" />
      </template>
    </el-table-column>
    <el-table-column prop="fBdkText10" label="电气工程" align="center" width="180">
      <template #default="scoped">
        <dc-dict v-model="scoped.row.fBdkText10" objectName="user" showKey="realName" />
      </template>
    </el-table-column>
    <el-table-column prop="fBdkText11" label="电子工程师" align="center" width="180">
      <template #default="scoped">
        <dc-dict v-model="scoped.row.fBdkText11" objectName="user" showKey="realName" />
      </template>
    </el-table-column>
    <el-table-column prop="fBdkText12" label="软件工程" align="center" width="180">
      <template #default="scoped">
        <dc-dict v-model="scoped.row.fBdkText12" objectName="user" showKey="realName" />
      </template>
    </el-table-column>
    <el-table-column prop="fBusinessDivisionId" label="事业部" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fBusinessDivisionId }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fBdkText14" label="客户规格型号" align="center" />
    <el-table-column prop="fQlktDate" label="客户下单日期" align="center" />
    <el-table-column prop="fPersonLiable" label="责任人" align="center" />

    <el-table-column prop="fQlktText6" label="请购部门" align="center" />
    <el-table-column prop="fQlktText7" label="2D" align="center" />
    <el-table-column prop="fQlktText8" label="Catagory" align="center" />
    <el-table-column prop="fQlktText9" label="订单项次号" align="center" />
    <el-table-column prop="fQlktText10" label="请购人" align="center" />
    <el-table-column prop="fOraCheckbox" label="是否手工已推应收 " align="center" />
    <el-table-column prop="fEwProducSeriesId" label="产品系列" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fEwProducSeriesId }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fEwPhase" label="阶段" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fEwPhaseName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fOraAssistant1" label="项目名称" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fOraAssistant1Name }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fOraDate" label="源单日期" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fOraDate }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fOraDate1" label="要求齐套日" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fOraDate1 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fOraQty" label="库存" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fOraQty }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fOraText2" label="跟单" align="center" />
    <el-table-column prop="fOraText4" label="PM回复交期" align="center" />
    <el-table-column prop="fOraText5" label="客户交期ETA" align="center" width="180">
      <template #default="scoped">
        <span>{{ scoped.row.fOraText5 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="fExchangeRate" label="汇率" align="center" width="150" />
    <el-table-column prop="fOraTaxRate" label="税率" align="center" width="150" />
  </el-table>
  <el-form class="custom-form" label-width="120px" :inline="true" v-if="info.createUser != null">
    <div class="form-item-info mt-5 form-display">
      <el-form-item label="发起人">
        <dc-view v-model="info.createUser" objectName="user"
      /></el-form-item>
      <el-form-item label="发起时间">
        {{ info.createTime }}
      </el-form-item>
      <el-form-item label="发起部门">
        <dc-view v-model="info.createDept" objectName="dept"
      /></el-form-item>
    </div>
  </el-form>
  <el-form-item class="form-itme-width_100 mt-10">
    <el-button @click="submit" v-if="formData.editStatus == true">通过</el-button>
    <el-button type="danger" @click="rejectSubmit" v-if="formData.editStatus == true"
      >驳回</el-button
    >
  </el-form-item>
</template>

<script setup name="executionSubmit">
import { reactive, toRefs, onMounted } from 'vue';
import Api from '@/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const { proxy } = getCurrentInstance();

// 数据字典

const { DC_BILL_TYPE } = proxy.useCache([{ key: 'DC_BILL_TYPE' }]);

const pageData = reactive({
  loading: false,
  queryParams: {
    current: 1,
    size: 10,
  },
  formData: {},
});

const { formData, queryParams, loading } = toRefs(pageData);

const props = defineProps({
  // 详情
  info: {
    type: Object,
    default: {},
  },
});

onMounted(() => {
  formData.value = props.info;
});

// 提交
const submit = async () => {
  try {
    await ElMessageBox.confirm('确定通过吗？', '是否通过', {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      type: 'warning',
    });

    loading.value = true;

    const res = await Api.pdp.dcErporder.pass(formData.value);
    const { code, msg } = res.data;

    if (code === 200) {
      proxy.$message.success(msg);
      router.push('/pdp/execution/list');
    }

    ElMessage({
      type: 'success',
      message: '已通过',
    });
  } catch (error) {
    if (error !== 'cancel') {
      // 捕获 API 调用或其他非取消操作的错误
      proxy.$message.error('提交失败，请稍后重试');
    } else {
      ElMessage({
        type: 'info',
        message: '已取消',
      });
    }
  } finally {
    loading.value = false;
  }
};

const rejectSubmit = async () => {
  try {
    const rejectValue = await ElMessageBox.prompt('请输入驳回原因', '驳回原因', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    });

    loading.value = true;
    const form = {
      ...formData.value,
      causeOfRejection: rejectValue.value,
    };
    try {
      const res = await Api.pdp.dcErporder.reject(form);
      const { code, msg } = res.data;

      if (code === 200) {
        proxy.$message.success(msg);
        router.push('/pdp/execution/list');
      }
    } catch (error) {
      console.error('API 调用失败:', error);
    } finally {
      loading.value = false;
    }
  } catch {
    // 用户点击“取消”
    ElMessage({
      type: 'info',
      message: '取消驳回',
    });
  }
};
</script>
<style lang="scss">
.business-container {
  .basic-container__card {
    background-color: transparent;

    .el-card__body {
      padding: 0 !important;
    }
  }
}
</style>
<style lang="scss">
.custom-form {
  display: flex;
  flex-wrap: wrap;

  .form-item-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .form-itme-width_30 {
    width: 30% !important;
    margin-right: 0;

    .form-item-value {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      border: 1px solid #ccc;

      span {
        padding-left: 10px;
      }

      .form-item-placeholder {
        padding-left: 10px;
        color: #a8abb2;
      }
    }

    .form-item-enterprise {
      padding: 9px 12px;
      border: 1px solid #dadbe0;
      font-weight: 400;
      font-size: 14px;
      color: #333;
      line-height: 14px;
      border-radius: 4px;
    }

    .active {
      border: none;
      background: #f78431;
      color: #fff;
    }
  }
}

@media (max-width: 1360px) {
  .form-itme-width_30 {
    width: 100% !important;
    margin-right: 0;
  }
}
</style>
<style scoped lang="scss">
.wrap-left-form {
  display: flex;
  justify-content: center;
}

.form-center {
  display: flex;
  flex-wrap: wrap;
}

.form-group-header-title {
  margin: 28px 0 20px 0 !important;
}

.form-group-header-btn {
  margin-bottom: 22px;
}

.form-group-title {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 28px 0 32px 0;
  font-weight: 600;
  font-size: 16px;
  color: #333;

  &::before {
    margin-right: 4px;
    display: block;
    content: '';
    width: 4px;
    height: 13px;
    background-color: #f78431;
  }

  .add-box {
    display: flex;
    align-items: center;
    margin-left: 40px;
    font-weight: 400;
    font-size: 14px;
    color: #f78431;
    cursor: pointer;
  }
}

.form-item-row {
  width: 93% !important;
}

.form-item-width {
  width: 100%;
}

.ipt {
  width: 100%;
  border: 0px;
  background: none;
}
.form-display {
  display: flex;
  justify-content: space-around;
  :deep(.el-form-item__label) {
    font-size: 16px;
  }
  :deep(.el-form-item__content) {
    font-size: 16px;
  }
}
</style>
